<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true"><block slot="content">确认订单</block></cu-custom>
		<view class="bg-white radius12 margin-top-sm margin-left-sm margin-right-sm padding" @tap="selectAddress">
			<view class="flex align-center" style="min-height: 140rpx;">
				<view class="cu-avatar radius orderIcon" style="background-image:url(../../static/images/icon_order_addr.png);height: 50rpx;"></view>
				<view class="margin-left" style="flex: 1;" v-if="addr">
					<view class="">
						<text>{{addr.name}}</text>
						<text class="margin-left">{{addr.mobile}}</text>
					</view>
					<view class="text-sm margin-top-sm" style="line-height:30upx;">
						{{addr.province || ''}}{{addr.city|| ''}}{{addr.county|| ''}}{{addr.town|| ''}}{{addr.addr|| ''}}
					</view>
				</view>
				<view class="margin-left" style="flex: 1;" v-else>
					<view class="text-sm margin-top-sm" style="line-height:30upx;">
						暂无地址 去添加一个
					</view>
				</view>
				<text class="cuIcon-right text-333" style="font-size:30rpx;"></text>
			</view>
		</view>
		<view class="bg-white radius12 overHidden margin-top-sm margin-left-sm margin-right-sm padding" v-if="buylist.length" v-for="(item,index) in buylist" :key="index">
			<view >
				<view class="flex align-center">
					<image src="../../static/images/icon_shop_black.png" style="width: 30rpx;height: 30rpx;margin-right: 10rpx;" mode=""></image>
					<view class="text-black text-df">{{item.seller_name}}</view>
				</view>
				<view class="flex margin-top-sm" v-for="(key,kIndex) in item.sku_list" :key="kIndex" v-if="key.checked==1">
					<view class="cu-avatar radius goodsImg" :style="'background-image:url('+key.goods_image+');'"></view>
					<view class="content margin-left-sm" style="flex: 1;">
						<view class="text-sm" style="line-height:34upx;">
							{{key.name}}
						</view>
						<view class="text-grey text-sm flexLine" style="">
							<text>数量：x{{key.num}}</text>
							<text>￥{{key.real_price | formatPrice}}</text>
						</view>
						<view class="text-grey text-sm" style="width: 100%; margin-top: 10rpx;">
							<text>规格：{{key | formatterSkuSpec}}</text>
						</view>
					</view>
				</view>
				<view class="flexLine text-sm">
					<view class="text-black">商品总价</view>
					<view>￥{{item.price.original_price | formatPrice}}</view>
				</view>
				<view class="flexLine text-sm">
					<text class="text-black">运费</text>
					<text>￥{{item.price.freight_price | formatPrice}}</text>
				</view>
				<view class="flexLine text-df">
					<text class="text-black">实付款（含运费）</text>
					<text class="text-order-orange">￥{{item.price.total_price | formatPrice}} </text>
				</view>
			</view>
		</view>
		<view class="bg-white radius12 overHidden margin-top-sm margin-left-sm margin-right-sm padding-sm">
			<view class="flex align-center justify-between" style="flex: 1;">
				<text class="text-333">支付方式</text>
			</view>
			<view class="cu-list menu text-left">
				<view class="cu-item">
					<label class="flex justify-between align-center flex-sub">
						<view class="flex align-center">
							<image src="../../static/images/icon_wechat.png" style="width:60rpx; height: 60rpx;" mode="aspectFit"></image>
							<text class="margin-left-sm">微信</text>
						</view>
						<icon type="success" color="#CB1414"/>
					</label>
				</view>
			</view>
		</view>
		<view class="bg-white radius12 overHidden margin-top-sm margin-left-sm margin-right-sm padding-sm" @tap="goToinvoice">
			<view class="flex align-center justify-between" style="flex: 1;">
				<text class="text-333">发票</text>
				<view class="flex align-center">
					<text v-if="checkoutParam.receipt.receipt_title">{{checkoutParam.receipt.receipt_title+'-'+checkoutParam.receipt.receipt_content}}</text>
					<text v-else>不需要</text>
					<text class="cuIcon-right text-grey" style="font-size: 20px;"></text>
				</view>
			</view>
		</view>
		<view style="height: 120rpx;"></view>
		<view class="cu-bar bg-white tabbar foot border shop">
			<view class="padding flex justify-between" style="width: 100%;">
				<view class="flex align-center">
					<view class="text-sm">合计:</view><view class="text-bold text-df text-black">￥{{sumPrice | formatPrice}}</view>
				</view>
				<button class="cu-btn bg-red round shadow-blur" @tap="confirmOrder">立即支付</button>
			</view>
		</view>	
	</view>
</template>

<script>
	import * as Checkout_API from '@/api/checkout.js'
	import * as Address_API from '@/api/member/address.js' 
	import * as Trade_API from '@/api/trade.js' 
	import * as Cart_API from '@/api/cart.js' 
	import * as Foundation from '@/utils/Foundation.js'
	import * as Pay_API from '@/api/pay.js'
	let client_type = 'MINI'
	export default {
		data() {
			return {
				type:'',
				goods:{},
				buylist:[],		//订单列表
				goodsPrice:0.0,	//商品合计价格
				sumPrice:0.0,	//用户付款价格
				freight:0.00,	//运费
				note:'',		//备注
				int:1200,		//抵扣积分
				deduction:0,	//抵扣价格
				marks:'',
				buyNumber:1,
				price:0.00,
				checkoutParam:{},
				addr:{},//收货地址
				paymentList:[], //支付列表
				plugin_id: 'weixinPayPlugin',
				payTypeList:[]
			};
		},
		onLoad(e) {
			this.GET_CheckoutParams()
		},
		onShow() {
			this.GET_CheckoutParams()
			this.getPayTypeList()
			//页面显示时，加载订单信息
			uni.getStorage({
				key:'buylist',
				success: (ret) => {
					this.buylist = ret.data.cart_list
					this.sumPrice = ret.data.total_price.total_price
				}
			});
		},
		onBackPress() {
			this.clearOrder()
		},
		methods:{
			clearOrder(){
				uni.removeStorage({
					key: 'buylist',
					success: (res)=>{
						this.buylist = []
					}
				})
				uni.removeStorage('paymentOrder')
			},
			confirmOrder(){
				if(this.addr.mobile){
					uni.showLoading({
						title:'正在提交订单...'
					})
					let client = 'MINI'
					Trade_API.CreateTrade(client).then(res =>{
						if(res.trade_sn){
							uni.setStorage({
								key:'paymentOrder',
								data:res,
								success: () => {
									uni.hideLoading();
									setTimeout(()=>{
										this.confirm(res.trade_sn)
									},500)
									
								}
							})
						}
					})	
				}else{
					uni.showToast({
						icon:'none',title:'请选择收货地址'
					})
					setTimeout(()=>{
						this.selectAddress()
					},500)
				}
			},
			//选择收货地址
			selectAddress(){
				uni.navigateTo({
					url:'../profile/address/addrList?izOrder=1'
				})
			},
			GET_CheckoutParams(){
				Checkout_API.getCheckoutParams().then(res =>{
					this.checkoutParam = res
					this.getDefaultAddr()
				})
			},
			getDefaultAddr(){
				Address_API.getAddr(this.checkoutParam.address_id).then(res =>{
					this.addr = res
				})	
			},
			goToinvoice(){
				uni.navigateTo({
					url:'./invoice?receipt='+this.checkoutParam.receipt
				})
			},
			// 检查是否需要支付
			async izPayCheck() {
				let sn = uni.getStorageSync('buylist').sn
				Pay_API.PayCheck(sn).then(res =>{
				   this.needPay = true
			   })
			},
			// 获取支付类型列表
			async getPayTypeList() {
			   // Pay_API.PaymentMethod(client_type).then(res =>{
				  //  this.payTypeList = res
			   // })
			},
			//确认支付
			async confirm(sn) {
				let params = {
					payment_plugin_id:this.plugin_id,
					pay_mode:'normal',
					client_type:client_type
				}
				// let trade_type = this.trade_type==='cart'? 'order':'trade'
				let trade_type = 'trade'
			    Pay_API.Pay(trade_type,sn,params).then(res =>{
					let nonceStr=res.res.nonceStr
					let	timeStamp=res.res.timeStamp
					let	_package=res.res.package
					let	paySign=res.res.paySign
					let signType=res.res.signType
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: timeStamp,
						nonceStr:nonceStr,
						package: _package,
						signType: signType,
						paySign: paySign,
						success: res=> {
							uni.showToast({
								title: "支付成功",
								duration: 2000,
								icon: 'none'
							});
							// this.clearPaymentOrder()
							// uni.navigateBack({
							// 	delta: -1
							// })
							uni.redirectTo({
								url:'/pages/order/orderList'
							})
						},
						fail: err=> {
							if(err.errMsg === 'requestPayment:fail cancel'){
								uni.showToast({
									title: "已取消支付",
									icon: 'none'
								});
							}else{
								uni.showModal({
									content: "支付失败,原因为:\n " + err.errMsg,
									showCancel: false,
								})
							}
						}
					});			
				}).catch((rej)=>{
					uni.showToast({
						icon:'none',
						title:'交易支付发起失败'
					})
				})
			},
		},
		beforeDestroy() {
			this.clearOrder()
		}	
	}
</script>

<style lang="scss">

</style>
